<script setup>
import { ref, onMounted } from "vue";
import NewEraYouthDialog from "../center/components/NewEraYouthDialog.vue";
import PositionForexternalRecruitment from "../components/PositionForexternalRecruitment.vue";
import GraduationIntention from "../components/GraduationIntention.vue";
defineProps(["data"]);

const EraYVisible = ref(false);
const PFeRVisible = ref(false);
const GraduationIntentionVisible = ref(false);
const Resume = () => {
  window.open(
    `https://cv.jysd.com/220/site/jyfwzd-entry-1?module=resume`,
    "_blank"
  );
};
const Interview = () => {
  window.open(
    `https://cv.jysd.com/220/site/jyfwzd-entry-1?module=interview`,
    "_blank"
  );
};
</script>

<template>
  <div class="right">
    <div class="title bg1"></div>
    <div class="box1">
      <div class="box1_a">
        <div class="box1_a_c">
          <div class="box1_a_c_name">2026届毕业生</div>
          <div class="box1_a_c_l"></div>
          <div class="box1_a_c_num">
            <span class="text-gradual-blue-20">{{ data?.bys || "--" }}</span
            ><span class="text-c9-55-12">人</span>
          </div>
        </div>
        <div class="box_centre_s_l"></div>
        <div class="box1_a_c">
          <div class="box1_a_c_name">就业意愿填报人数</div>
          <div class="box1_a_c_l"></div>
          <div class="box1_a_c_num">
            <span class="text-gradual-blue-20">{{ data?.inquiry || "--" }}</span
            ><span class="text-c9-55-12">人</span>
          </div>
        </div>
      </div>
      <div class="box1_b">
        <div class="box-c-c1">
          <img src="../../../assets/images/yuan.png" class="icon1" />
          <span>简历智评</span>
          <img src="../../../assets/images/aiBtn.png" class="icon2" />
          <img
            src="../../../assets/images/detail.png"
            class="detailArrow1"
            @click="Resume"
          />
        </div>
        <div class="box1_b_c">
          <div class="box1_b_c_name">累计在线简历</div>
          <div class="box1_b_c_l"></div>
          <div class="box1_bW_c_num">
            <span class="text-gradual-blue-20">{{
              data?.resume_online || "--"
            }}</span
            ><span class="text-c9-55-12">人</span>
          </div>
        </div>
        <div class="box_centre_s_l_"></div>
        <div class="box1_b_c">
          <div class="box1_b_c_name">累计完成简历智能诊断</div>
          <div class="box1_b_c_l"></div>
          <div class="box1_bW_c_num">
            <span class="text-gradual-blue-20">{{
              data?.resume_zhenduan || "--"
            }}</span
            ><span class="text-c9-55-12">人</span>
          </div>
        </div>
        <div class="box_centre_s_l_"></div>
        <div class="box1_b_c">
          <div class="box1_b_c_name">平台优秀简历</div>
          <div class="box1_b_c_l"></div>
          <div class="box1_bW_c_num">
            <span class="text-gradual-blue-20">{{
              data?.resume_youxiu || "--"
            }}</span
            ><span class="text-c9-55-12">人</span>
          </div>
        </div>
      </div>
      <div class="box1_b">
        <div class="box-c-c1">
          <img src="../../../assets/images/yuan.png" class="icon1" />
          <span>面试智评</span>
          <img src="../../../assets/images/aiBtn.png" class="icon2" />
          <img
            src="../../../assets/images/detail.png"
            class="detailArrow1"
            @click="Interview"
          />
        </div>
        <div class="box1_b_c">
          <div class="box1_b_c_name">累计模拟面试</div>
          <div class="box1_b_c_l"></div>
          <div class="box1_bW_c_num">
            <span class="text-gradual-blue-20">{{
              data?.interview_total || "--"
            }}</span
            ><span class="text-c9-55-12">人</span>
          </div>
        </div>
        <div class="box_centre_s_l_"></div>
        <div class="box1_b_c">
          <div class="box1_b_c_name">模拟面试服务学生</div>
          <div class="box1_b_c_l"></div>
          <div class="box1_bW_c_num">
            <span class="text-gradual-blue-20">{{
              data?.interview_student || "--"
            }}</span
            ><span class="text-c9-55-12">人</span>
          </div>
        </div>
      </div>
    </div>
    <div class="title bg2"></div>
    <div class="box">
      <div class="box_a">
        <div class="box-c-c1">
          <img src="../../../assets/images/yuan.png" class="icon1" />
          <span>大学生毕业意向</span>
          <img
            src="../../../assets/images/detail.png"
            class="detailArrow1"
            @click="GraduationIntentionVisible = true"
          />
        </div>
        <div class="box_a_a">
          <div class="box_a_a_c">
            <div class="box_a_a_c_c">
              <div class="box_a_a_c_c_c text-c9-55-14">正在求职</div>
              <div class="box_a_a_c_c_c">
                <span class="text-gradual-blue-20">154837</span>
                <span class="text-c9-55-12">人</span>
              </div>
            </div>
            <div class="box_centre_s_w"></div>
            <div class="box_a_a_c_c">
              <div class="box_a_a_c_c_c text-c9-55-14">参加公招</div>
              <div class="box_a_a_c_c_c">
                <span class="text-gradual-blue-20">22606</span>
                <span class="text-c9-55-12">人</span>
              </div>
            </div>
          </div>
          <div class="box_a_a_c">
            <div class="box_a_a_c_c">
              <div class="box_a_a_c_c_c text-c9-55-14">计划升学</div>
              <div class="box_a_a_c_c_c">
                <span class="text-gradual-blue-20">63518</span>
                <span class="text-c9-55-12">人</span>
              </div>
            </div>
            <div class="box_centre_s_w"></div>
            <div class="box_a_a_c_c">
              <div class="box_a_a_c_c_c text-c9-55-14">参军入伍</div>
              <div class="box_a_a_c_c_c">
                <span class="text-gradual-blue-20">9446</span>
                <span class="text-c9-55-12">人</span>
              </div>
            </div>
          </div>
        </div>
        <div class="box_a_b">
          <div class="box_a_b_c">
            <img src="@/assets/images/gxzt_item1.png" alt="" />
            <div class="box_a_b_c_c">
              <div class="box_a_b_c_c_name text-c9-55-14">准备出国</div>
              <div class="box1_b_c_l"></div>
              <div class="box_a_b_c_c_num">
                <span class="text-gradual-blue-20">1936</span>
                <span class="text-c9-55-12">人</span>
              </div>
            </div>
          </div>
          <div class="box_centre_s_l"></div>
          <div class="box_a_b_c">
            <img src="@/assets/images/gxzt_item2.png" alt="" />
            <div class="box_a_b_c_c">
              <div class="box_a_b_c_c_name text-c9-55-14">准备创业</div>
              <div class="box1_b_c_l"></div>
              <div class="box_a_b_c_c_num">
                <span class="text-gradual-blue-20">6176</span>
                <span class="text-c9-55-12">人</span>
              </div>
            </div>
          </div>
          <div class="box_centre_s_l"></div>
          <div class="box_a_b_c">
            <img src="@/assets/images/gxzt_item3.png" alt="" />
            <div class="box_a_b_c_c">
              <div class="box_a_b_c_c_name text-c9-55-14">暂不就业</div>
              <div class="box1_b_c_l"></div>
              <div class="box_a_b_c_c_num">
                <span class="text-gradual-blue-20">8815</span>
                <span class="text-c9-55-12">人</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box_b">
        <div class="box-c-c1">
          <img src="../../../assets/images/yuan.png" class="icon1" />
          <span>社会招录计划</span>
          <!-- <img src="../../../assets/images/aiBtn.png" class="icon2" /> -->
        </div>
        <div class="box_a_a">
          <div class="box_a_a_c">
            <div class="box_a_a_c_c">
              <div
                class="box_a_a_c_c_c text-c9-55-14 cur"
                @click="PFeRVisible = true"
              >
                重庆市社招岗位
                <img
                  src="../../../assets/images/detail.png"
                  class="detailArrow1"
                />
              </div>
              <div class="box_a_a_c_c_c">
                <span class="text-gradual-blue-20">269056</span>
                <span class="text-c9-55-12">人</span>
              </div>
            </div>
            <div class="box_centre_s_w"></div>
            <div class="box_a_a_c_c">
              <div class="box_a_a_c_c_c text-c9-55-14">职业体验岗位数</div>
              <div class="box_a_a_c_c_c">
                <span class="text-gray-18">5677</span>
                <span class="text-c9-55-12">人</span>
              </div>
            </div>
          </div>
          <div class="box_a_a_c">
            <div class="box_a_a_c_c">
              <div class="box_a_a_c_c_c text-c9-55-14"> 社招供需比</div>
              <div class="box_a_a_c_c_c">
                <span class="text-gray-18">1.69</span>
                <span class="text-c9-55-12">人</span>
              </div>
            </div>
            <div class="box_centre_s_w"></div>
            <!-- <div class="box_a_a_c_c">
              <div class="box_a_a_c_c_c text-c9-55-14">硕士研究生招生人数</div>
              <div class="box_a_a_c_c_c">
                <span class="text-gray-18">----</span>
                <span class="text-c9-55-12">人</span>
              </div>
            </div> -->
          </div>
        </div>
      </div>
      <div class="box_c">
        <div class="box-c-c1 cur" @click="GraduationIntentionVisible = true">
          <img src="../../../assets/images/yuan.png" class="icon1" />
          <span>大学生留渝就业统计</span>
          <!-- <img src="../../../assets/images/aiBtn.png" class="icon2" /> -->
        </div>
        <div class="box1_b_c">
          <div class="box1_b_c_name">市级部门完成岗位</div>
          <div class="box1_b_c_l"></div>
          <div class="box1_bW_c_num">
            <span class="text-gradual-blue-20">{{
              data?.sinfo_pro || "--"
            }}</span
            ><span class="text-c9-55-12">人</span>
          </div>
        </div>
        <div class="box_centre_s_l_"></div>
        <div class="box1_b_c">
          <div class="box1_b_c_name">区县完成岗位</div>
          <div class="box1_b_c_l"></div>
          <div class="box1_bW_c_num">
            <span class="text-gradual-blue-20">{{
              data?.sinfo_dic || "--"
            }}</span
            ><span class="text-c9-55-12">人</span>
          </div>
        </div>
      </div>
    </div>
    <NewEraYouthDialog
      :visible="EraYVisible"
      title="时代新人"
      @close="EraYVisible = false"
    ></NewEraYouthDialog>

    <PositionForexternalRecruitment
      :visible="PFeRVisible"
      title="重庆市社招岗位"
      @close="
        () => {
          PFeRVisible = false;
        }
      "
    >
    </PositionForexternalRecruitment>

    <GraduationIntention
      :visible="GraduationIntentionVisible"
      title="大学生毕业意向"
      @close="
        () => {
          GraduationIntentionVisible = false;
        }
      "
    ></GraduationIntention>
  </div>
</template>

<style lang="less" scoped>
.right {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  .title {
    width: 100%;
    height: 2.75rem;
    display: flex;
    align-items: center;
    position: relative;
    .detailArrow {
      width: 21px;
      height: 18px;
      position: absolute;
      right: 12px;
      cursor: pointer;
    }
  }
  .bg1 {
    background: url(../../../assets/images/title1_1.png) no-repeat;
    background-size: 100% 100%;
  }
  .bg2 {
    background: url("../../../assets/images/title1_2.png") no-repeat;
    background-size: 100% 100%;
  }
  .box1 {
    width: 100%;
    height: 338px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    .box1_a {
      width: 100%;
      height: 82px;
      display: flex;
      background: rgba(9, 54, 100, 0.3);
      .box1_a_c {
        width: 50%;
        height: 100%;
        padding: 0 0 0 12px;
        .box1_a_c_name {
          width: 100%;
          height: 38px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-family: "Alibaba PuHuiTi 2.0-65 Medium";
          font-size: 14px;
          color: #c9e9f8;
          line-height: 38px;
        }
        .box1_a_c_l {
          width: 100px;
          border-radius: 0px 0px 0px 0px;
          border: 1px solid;
          border-image: linear-gradient(
              90deg,
              rgba(201, 233, 248, 0.4),
              rgba(201, 233, 248, 0)
            )
            1 1;
        }
        .box1_a_c_num {
          width: 100%;
          height: 44px;

          display: flex;
          align-items: center;
        }
      }
    }
    .box1_b {
      width: 100%;
      height: 112px;
      display: flex;
      flex-wrap: wrap;
      padding: 0 0 0 12px;
      background: rgba(9, 54, 100, 0.3);
      .box-c-c1 {
        width: 100%;
        height: 38px;
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: "Alibaba PuHuiTi 2.0-85 Bold";
        font-size: 16px;
        color: #c9e9f8;
        position: relative;
        .detailArrow1 {
          width: 21px;
          height: 18px;
          position: absolute;
          right: 12px;
          cursor: pointer;
        }
      }
      .box1_b_c {
        flex: 1;
        height: 74px;

        .box1_b_c_name {
          width: 100%;
          height: 26px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-family: "Alibaba PuHuiTi 2.0-65 Medium";
          font-size: 14px;
          color: #c9e9f8;
          line-height: 26px;
        }
        .box1_b_c_l {
          width: 100px;
          border-radius: 0px 0px 0px 0px;
          border: 1px solid;
          border-image: linear-gradient(
              90deg,
              rgba(201, 233, 248, 0.4),
              rgba(201, 233, 248, 0)
            )
            1 1;
        }
        .box1_b_c_num {
          width: 100%;
          height: 32px;
          display: flex;
          align-items: center;
        }
      }
    }
    .box1_c {
      width: 100%;
      height: 112px;
      border: 1px gold solid;
    }
  }
  .box {
    width: 100%;
    height: 544px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    .box_a {
      width: 100%;
      height: 248px;
      padding: 0 0 0 12px;
      background: rgba(9, 54, 100, 0.4);
      .box-c-c1 {
        width: 100%;
        height: 38px;
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: "Alibaba PuHuiTi 2.0-85 Bold";
        font-size: 16px;
        color: #c9e9f8;
        position: relative;
        .detailArrow1 {
          width: 21px;
          height: 18px;
          position: absolute;
          right: 12px;
          cursor: pointer;
        }
      }
      .box_a_a {
        width: 100%;
        height: 124px;
        display: flex;
        justify-content: space-between;
        .box_a_a_c {
          width: 49%;
          height: 100%;
          background: rgba(9, 54, 100, 0.5);
          .box_a_a_c_c {
            width: 100%;
            height: 50%;

            position: relative;
            .box_a_a_c_c_c {
              width: 100%;
              height: 50%;
              padding: 0 0 0 8px;
              display: flex;
              align-items: center;
            }
          }
          .box_a_a_c_c::before {
            content: "";
            width: 2px;
            height: 20px;
            border-radius: 4px;
            background-color: #ffc421;
            position: absolute;
            left: 0px;
            top: 30%;
          }
        }
      }
      .box_a_b {
        width: 100%;
        height: 60px;
        margin-top: 12px;
        display: flex;
        .box_a_b_c {
          width: 30%;
          height: 100%;

          display: flex;
          align-items: center;
          img {
            width: 54px;
            height: 47.63px;
          }
          .box_a_b_c_c {
            width: 100%;
            height: 100%;
            .box1_b_c_l {
              width: 100px;
              border-radius: 0px 0px 0px 0px;
              border: 1px solid;
              border-image: linear-gradient(
                  90deg,
                  rgba(201, 233, 248, 0.4),
                  rgba(201, 233, 248, 0)
                )
                1 1;
            }
            .box_a_b_c_c_name {
              width: 100%;
              height: 50%;
              display: flex;
              align-items: center;
            }
            .box_a_b_c_c_num {
              width: 100%;
              height: 50%;
              display: flex;
              align-items: center;
            }
          }
        }
      }
    }
    .box_b {
      width: 100%;
      height: 160px;
      padding: 0 0 0 12px;
      background: rgba(9, 54, 100, 0.4);
      .box-c-c1 {
        width: 100%;
        height: 38px;
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: "Alibaba PuHuiTi 2.0-85 Bold";
        font-size: 16px;
        color: #c9e9f8;
      }
      .box_a_a {
        width: 100%;
        height: 124px;
        display: flex;
        justify-content: space-between;
        .box_a_a_c {
          width: 49%;
          height: 100%;
          background: rgba(9, 54, 100, 0.5);
          .box_a_a_c_c {
            width: 100%;
            height: 50%;

            position: relative;
            .box_a_a_c_c_c {
              width: 100%;
              height: 50%;
              padding: 0 0 0 8px;
              display: flex;
              align-items: center;
            }
          }
          .box_a_a_c_c::before {
            content: "";
            width: 2px;
            height: 20px;
            border-radius: 4px;
            background-color: #ffc421;
            position: absolute;
            left: 0px;
            top: 30%;
          }
        }
      }
    }
    .box_c {
      width: 100%;
      height: 112px;
      padding: 0 0 0 12px;
      background: rgba(9, 54, 100, 0.4);
      display: flex;
      flex-wrap: wrap;
      .box-c-c1 {
        width: 100%;
        height: 38px;
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: "Alibaba PuHuiTi 2.0-85 Bold";
        font-size: 16px;
        color: #c9e9f8;
        position: relative;
      }
      .box1_b_c {
        flex: 1;
        height: 74px;

        .box1_b_c_name {
          width: 100%;
          height: 26px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-family: "Alibaba PuHuiTi 2.0-65 Medium";
          font-size: 14px;
          color: #c9e9f8;
          line-height: 26px;
        }
        .box1_b_c_l {
          width: 100px;
          border-radius: 0px 0px 0px 0px;
          border: 1px solid;
          border-image: linear-gradient(
              90deg,
              rgba(201, 233, 248, 0.4),
              rgba(201, 233, 248, 0)
            )
            1 1;
        }
        .box1_b_c_num {
          width: 100%;
          height: 32px;
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .box-bg {
    background: rgba(9, 54, 100, 0) !important;
  }
  .op {
    opacity: 0.6;
  }

  .pos1 {
    position: absolute;
    left: 93px;
    top: 10px;
  }
  .pos2 {
    position: absolute;
    left: 230px;
    top: 10px;
  }
  .pos3 {
    position: absolute;
    left: 367px;
    top: 10px;
  }
  .arrow {
    width: 44px;
    height: 28px;
  }

  .icon1 {
    width: 20px;
    height: 20px;
  }
  .icon2 {
    width: 36px;
    height: 18px;
  }
}
.box_centre_s_l {
  height: 100%;
  border: 1px solid;
  border-image: linear-gradient(
      rgba(0, 178, 238, 0),
      rgba(0, 178, 238, 0.7),
      rgba(0, 178, 238, 0)
    )
    1 1;
  margin: 0 6px 0 6px;
}
.box_centre_s_l_ {
  height: 74px;
  border: 1px solid;
  border-image: linear-gradient(
      rgba(0, 178, 238, 0),
      rgba(0, 178, 238, 0.7),
      rgba(0, 178, 238, 0)
    )
    1 1;
  margin-right: 12px;
}
.box_centre_s_w {
  width: 230px;
  height: 1px;
  background: url("@/assets/images/box_centre_s_w.png") no-repeat;
  // background-size: cover;
  background-position: center;
}
.cur {
  cursor: pointer;
  .detailArrow1 {
    width: 21px;
    height: 18px;
    position: absolute;
    right: 12px;
    cursor: pointer;
  }
}
</style>
